<template>
  <!-- 导航栏 -->
  <navbarback></navbarback>
  <view class="viewpoint">
    <view class="top">
      <view class="left">
        <view class="image">
          <image src="../../static/images/person_3.png" mode="scaleToFill" />
        </view>
        <view class="info">
          <view style="width: 100%; margin: 0rpx 5rpx"
            ><text style="font-size: 16rpx; color: black; font-weight: bold"
              >户主：{{ patientMaster.name }}
              <text style="color: #b9b9b9; font-size: 14rpx"
                >{{ patientMaster.age }}岁 {{ patientMaster.sex }}</text
              ></text
            ></view
          >
          <view class="disease_item">{{ patientMaster.disease }} </view>
        </view>
      </view>
      <view class="right">
        <view class="I">电话：{{ patientMaster.phoneNumber }}</view>
        <view class="I">地址：{{ patientMaster.address }}</view>
        <view class="I">身份证：{{ patientMaster.idNumber }}</view>
      </view>
      <view
        @tap="tohomesign"
        class="sginhome"
        v-if="patientMaster.signHome == null && member.length != 0"
        >家庭签约</view
      >
    </view>
    <view
      style="display: flex; margin-top: 5rpx; justify-content: space-between; text-align: center"
      ><text style="font-size: 14rpx; font-weight: bold">家庭成员：</text
      ><text
        @tap="addmember"
        style="
          color: #fff;
          padding: 5rpx;
          background-color: #1890ff;
          font-size: 14rpx;
          font-weight: bold;
          border-radius: 5rpx;
        "
        >添加成员</text
      ></view
    >
    <scroll-view class="visit-list" scroll-y :show-scrollbar="false">
      <view>
        <view class="visit-item" v-for="(visitItem, index) in member" :key="index">
          <view class="visit-item-text">
            <text>{{ index + 1 }}</text>
          </view>
          <view class="visit-item-text">
            <text>{{ visitItem.name }}</text>
          </view>
          <view class="visit-item-text">
            <text>{{ visitItem.sex }}</text>
          </view>
          <view class="visit-item-text">
            <text>{{ visitItem.age }}岁</text>
          </view>
          <view class="visit-item-text">
            <text>{{ visitItem.disease }}</text>
          </view>
          <view class="visit-item-text">
            <text
              @tap="Deletemember(visitItem)"
              class="iconfont icon-cuowuguanbiquxiao-yuankuang"
            ></text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
  <!-- 输入框示例 -->
  <uni-popup ref="inputDialog" type="dialog">
    <uni-popup-dialog
      ref="inputClose"
      mode="input"
      title="添加成员"
      placeholder="请输入患者身份证号"
      @confirm="dialogInputConfirm"
    ></uni-popup-dialog>
  </uni-popup>
</template>
<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue'
import navbarback from '@/component/navbarback2.vue'
import { queryHome, createhome, deletemember } from '@/services/archivue'
import { onLoad, onShow } from '@dcloudio/uni-app'
const query = defineProps<{ params: any }>()
const infoform = ref()
infoform.value = JSON.parse(query.params)
const patientMaster = ref()
const member = ref<any[]>([])
const addidNumber = ref()
const addform = ref({
  idNumber: '',
  idNumberList: [],
})
const getHome = async () => {
  const res = await queryHome(infoform.value.idNumber)
  patientMaster.value = []
  member.value = []
  if (res.data != '无家庭档案') {
    patientMaster.value = res.data.patientMaster
    member.value = res.data.patientList
  } else {
    patientMaster.value = infoform.value
  }
  addform.value.idNumber = patientMaster.value.idNumber
}
const inputDialog = ref()
const addmember = () => {
  inputDialog.value.open()
}

const Deletemember = async (item: any) => {
  const res = await deletemember({
    idNumber: patientMaster.value.idNumber,
    otherIdNumber: item.idNumber,
  })
  if (res.code == 200) {
    getHome()
    uni.showToast({ icon: 'none', title: '删除成功' })
  }
}
const dialogInputConfirm = async (e: any) => {
  member.value.forEach((e: any) => {
    addform.value.idNumberList.push(e.idNumber)
  })
  addform.value.idNumberList.push(e)
  const res = await createhome(addform.value)
  if (res.code == 200) {
    getHome()
    uni.showToast({ icon: 'none', title: '添加成功' })
  }
}
const tohomesign = () => {
  uni.navigateTo({ url: `/pages/signhome/signhome?param1=${JSON.stringify(patientMaster.value)}` })
}
onLoad(() => {
  getHome()
})
onShow(() => {
  getHome()
})
</script>

<style lang="scss">
page {
  height: 100%;
  background-color: #f4f4f4;
}
.viewpoint {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 50rpx);
  padding: 10rpx 15rpx;
  width: 100%;
  position: relative;
  .top {
    width: 100%;
    height: 80rpx;
    background-color: #fff;
    display: flex;
    padding: 5rpx;
    position: relative;
    .sginhome {
      position: absolute;
      top: 10rpx;
      right: 10rpx;
      padding: 2rpx 5rpx;
      background-color: #00a8ff;
      color: #fff;
      font-weight: bold;
      font-size: 14rpx;
    }
    .left,
    .right {
      height: 100%;
      flex: 1;
    }
    .left {
      display: flex;
      justify-content: center;
      align-items: center;
      .image {
        height: 60rpx;
        width: 70rpx;
      }
      .info {
        flex: 1;
        height: 100%;
        .disease_item {
          margin: 0 5rpx;
          width: auto;
          background-color: #00a8ff;
          color: #fff;
          padding: 3rpx;
          font-weight: bold;
          border-radius: 4rpx;
          font-size: 12rpx;
        }
      }
    }
    .right {
      .I {
        margin: 4rpx 0;
        font-size: 14rpx;
        font-weight: bold;
        color: #b5b2b2;
      }
    }
  }
  .visit-list {
    margin-top: 5rpx;
    width: 100%;
    .visit-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      position: relative;
      overflow: hidden;
      height: 50rpx;
      padding-left: 50rpx;
      padding-right: 10rpx;
      margin-bottom: 4rpx;
      .visit-ribbon {
        background-color: #1890ff;
        overflow: hidden;
        white-space: nowrap;
        position: absolute;
        left: -8rpx;
        top: 8rpx;
        transform: rotate(-45deg);
        box-shadow: 0 0 1rpx #888;
        text {
          color: #fff;
          padding: 0rpx 10rpx;
          display: block;
          font-size: 8rpx;
        }
      }
      .visit-due {
        background-color: red;
      }
      .visit-save {
        background-color: #61666d;
      }
    }
    .visit-item-text {
      width: 20%;
      overflow: hidden;
      font-size: 12rpx;
      color: #333333;
    }
  }
}
</style>